@charset "utf-8";

@import "common/common";
@import "common/reset";

.web{
    height: 100%;
    header{
        position: absolute;
        p{
            text-align: center;
            font-size: r(26px);
        }
        .top_fenlei{
            margin-top: r(30px);
            margin-left: r(23px);
            margin-right: r(21px);
            height: r(57px);
            line-height: r(57px);
            a{
                float: left;
                font-size: r(26px);
                text-align: center;
                line-height: r(57px);
                height: r(57px);
                width: r(123px);
                display: inline-block;  
                border-radius: 10px;
                border: 1px solid $color;
                color: #000000;
            }
            i{
                color: $color;
                font-size: r(52px); 
                float: right;               
            }
        }
        .top_img{
            margin-top: r(28px);
            height: r(260px);
            margin-left:r(25px) ;
            margin-right: r(22px);
            img{
                width: 100%;
                height: 100%;
            }
        }        
    }
    main{
        width: 100%;
        overflow-y: scroll;
        position:absolute;
        top: r(405px);
        bottom: r(100px);
//      margin-left:r(42px) ;
//      margin-right: r(40px);
        p{
            margin-left:r(42px) ;
            margin-right: r(40px);
            height: r(68px);
            font-size: r(60px);
            color: $color;
            a{
                margin-top: r(10px);
                text-align: center;
                line-height: r(59px);
                display: inline-block;
                float: right;
                color: #FFFFFF;
                background: $color;
                border-radius: 10px;
                width: r(110px);
                height: r(59px);
                font-size: r(30px);
            }
            &:nth-child(2){
                margin-top: r(53px);
                font-size: r(30px);
                height: r(36px);
                color: #000000;
                i{
                    font-size: r(38px);
                    color: $color;
                }
                span{
                    color: $color;
                    &:nth-child(3){
                        float: right;
                        color: #8e8e8e;
                    }
                }
            }
            &:nth-child(3){
                padding: 0 r(11px);
                font-size: r(30px);
                margin-top: r(36px);
                height: r(67px);
                line-height: r(67px);
                background: $color;
                color: #FFFFFF;
                span{
                    float: right;
                }
            }
        }
        .shop_info{
            height: r(176px);
            margin: r(11px) r(40px) r(11px) r(42px);
            .left_img{
                width: r(176px);
                height: r(176px);
                display: inline-block;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .mid{
                display: inline-block;
                width: r(270px);
                height: 100%;
                vertical-align: top;
                margin-left: r(10px);
                p{                   
                    &:first-child{
                       height: initial;
                       font-size: r(30px); 
                       color: #000000;
                       margin: 0;
                    }
                    &:nth-child(2){
                        letter-spacing: -2px;
                        margin: 0;
                        span{
                            color: #929292;
                        }
                    }
                     &:nth-child(3){
                        margin: 0;
                        padding: 0;
                        color: #929292;
                        background: none;
                    }
                    &:nth-child(4){
                        font-size: r(20px);
                        margin: 0;
                        height: initial;
                    }
                }
            }
            .right_enter{
                display: inline-block;
                height: r(176px);
                line-height: r(176px);
                vertical-align: top;
                float: right;
                a{
                    display: inline-block;
                    width: r(112px);
                    height: r(60px);
                    color: #FFFFFF;
                    background: $color;
                    font-size: r(30px);
                    line-height: r(60px);
                    text-align: center;
                    border-radius: 10px;
                }
            }
        }
    }
    footer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0px;
        background-color: white;
        padding-top: 5.5px;
        &::after{
            content: '';
            width: 100%;
            border-top: 1px solid rgba(7,17,27,.1);
            position: absolute;
            top: 0;
            transform: scaleY(.5);
        }
        ul{
            display: flex;
            width: 100%;
            li{ 
                text-align: center;
                float: left;
                flex: 1;
                a{
                    display: block;
                    color: $color;      
                    div{
                        font-size: r(26px);
                    }     
                    i{
                        font-size: r(65px);
                    }                
                }
            }
        }
    }
}